<template>
  <div class="print-container">
    <div id="app">

      <vue-easy-print tableShow ref="easyPrint">
        <!-- 你自己编写打印的模板 -->
        <template slot-scope="func">
          <div id="print">
            <case-print v-if="printType==1" :caseData="caseHistoryDetail"></case-print>
            <prescription-print v-if="printType==2" :patientData="caseHistoryDetail"></prescription-print>
            <bill v-if="printType==3" :datas="caseHistoryDetail"></bill>
          </div>
        </template>
      </vue-easy-print>


    </div>
  </div>
</template>

<script>
  import bill from "./bill";

    import vueEasyPrint from "vue-easy-print";
    import casePrint from "./casePrint";
    import prescriptionPrint from "./prescriptionPrint";
    export default {
        name: "print",
        components:{casePrint,prescriptionPrint,vueEasyPrint,bill},
        data:function(){
            return{
                printType:1,
                caseHistoryDetail:{
                    age:[],
                    prescriptions:[]
                }
            }
        },
        methods:{
            printCase:function (data) {
                this.caseHistoryDetail = data;
                this.printType = 1;
                setTimeout(()=>{
                    this.$refs.easyPrint.print();
                },500)
            },
            printPrescription:function (data) {
                this.caseHistoryDetail = data;
                this.printType = 2;
                setTimeout(()=>{
                    this.$refs.easyPrint.print();
                },500)

            },
            printBill:function (data) {
                this.caseHistoryDetail = data;
                this.printType = 3;
                setTimeout(()=>{
                    this.$refs.easyPrint.print();
                },500)
            }
        }
    }
</script>

<style scoped>
  #print{
    display: none;
  }
  @media print{
    #print{
      display: block;
    }
  }
</style>
